<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>The source code</title>
  <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
  <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
  <style type="text/css">
    .highlight { display: block; background-color: #ddd; }
  </style>
  <script type="text/javascript">
    function highlight() {
      document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
    }
  </script>
</head>
<body onload="prettyPrint(); highlight();">
  <pre class="prettyprint lang-js">
var $ = require(&#39;jquery&#39;),
  BUI = require(&#39;bui-common&#39;),
  Group = require(&#39;./group&#39;),
  Raphael = require(&#39;./raphael/index&#39;),
  Container = require(&#39;./container&#39;);

<span id='BUI-Graphic-Canvas'>/**
</span> * @class BUI.Graphic.Canvas
 * 图形的画板，支持SVG和VML
 * @extends BUI.Graphic.Container
 */
var Canvas = function(cfg){
  Canvas.superclass.constructor.call(this,cfg);
};

Canvas.ATTRS = {
<span id='BUI-Graphic-Canvas-cfg-width'>  /**
</span>   * 宽度
   * @cfg {Number} width
   */
  width : {},
<span id='BUI-Graphic-Canvas-cfg-height'>  /**
</span>   * 高度
   * @cfg {Number} height
   */
  height : {},
<span id='BUI-Graphic-Canvas-cfg-render'>  /**
</span>   * 渲染到的节点
   * @cfg {String} render
   */
  render : {} ,
<span id='BUI-Graphic-Canvas-property-viewbox'>  /**
</span>   * @private
   * @type {Object}
   */
  viewbox : {

  }
};

BUI.extend(Canvas,Container);

BUI.augment(Canvas,{
<span id='global-method-getGroupClass'>  /**
</span>   * @protected
   * @ignore
   */
  getGroupClass : function(){
    return Group;
  },
  renderUI : function(){
    var _self = this,
      render = _self.get(&#39;render&#39;),
      containerEl = $(render),
      id = containerEl.attr(&#39;id&#39;),
      width = _self.get(&#39;width&#39;),
      height = _self.get(&#39;height&#39;),
      el;
    if(!id){
      id = BUI.guid(&#39;canvas&#39;);
      containerEl.attr(&#39;id&#39;,id);
    }
    el = Raphael(id,width,height);

    _self.set(&#39;canvas&#39;,_self);
    _self.set(&#39;el&#39;,el);
    _self.set(&#39;node&#39;,el.canvas);
  },
<span id='BUI-Graphic-Canvas-method-setSize'>  /**
</span>   * 设置宽高
   * @param {Number} width 宽
   * @param {Number} height 高
   */
  setSize : function(width,height){
    this.set(&#39;width&#39;,width);
    this.set(&#39;height&#39;,height);
    this.get(&#39;el&#39;).setSize(width,height);
  },
<span id='BUI-Graphic-Canvas-method-setViewBox'>  /**
</span>   * 设置viewbox,用于放大，缩小视图
   * @param {Number} x x轴起点
   * @param {Number} y y轴起点
   * @param {Number} width 宽
   * @param {Number} height 高
   * @param {Boolean} fit 自适应宽高
   */
  setViewBox : function(x, y, w, h, fit){
    this.get(&#39;el&#39;).setViewBox(x, y, w, h, fit);
    this.set(&#39;viewbox&#39;,{
      x : x,
      y : y,
      width : w,
      height : h
    });
  },
<span id='BUI-Graphic-Canvas-method-getPoint'>  /**
</span>   * 将页面上的坐标转换成画布上的坐标
   * @param  {Number} pageX 页面上的x坐标
   * @param  {Number} pageY 页面上的y坐标
   * @return {Object} 坐标对象包含x,y
   */
  getPoint : function(pageX,pageY){
    var _self = this,
      node = _self.get(&#39;node&#39;),
      viewbox = _self.get(&#39;viewbox&#39;),
      offset = $(node).offset(),
      point = {};

    if(!viewbox){ //如果不存在viewbox
      point.x = pageX - offset.left;
      point.y = pageY - offset.top;
    }else{
      var xfactor = viewbox.width / _self.get(&#39;width&#39;), //计算 宽度比例
        yfactor = viewbox.height / _self.get(&#39;height&#39;); //高度比例
      point.x = (pageX - offset.left)  * xfactor + viewbox.x;
      point.y = (pageY - offset.top) * yfactor + viewbox.y;
    }

    return point;
  },
<span id='BUI-Graphic-Canvas-method-getRelativePoint'>  /**
</span>   * 将相对地址转换成为画布上的坐标
   * @param  {Number} dx 相对于起始点的x偏移
   * @param  {Number} dy 相对于起始点的y偏移
   * @return {Object} 坐标对象
   */
  getRelativePoint : function(dx,dy){
    var _self = this,
      viewbox = _self.get(&#39;viewbox&#39;),
      point = {};
    if(!viewbox){
      point.x = dx;
      point.y = dy;
    }else{
      var xfactor = viewbox.width / _self.get(&#39;width&#39;), //计算 宽度比例
        yfactor = viewbox.height / _self.get(&#39;height&#39;); //高度比例
      point.x = dx * xfactor + viewbox.x;
      point.y = dy * xfactor + viewbox.y;
    }

    return point;
  }

});
module.exports = Canvas;
</pre>
</body>
</html>
